<template>
    <div class="detail">
        <div class="container">
            <img class="bg"
                 src="http://evp.51job.com/2019/apc/miniapp/bg_bottom.png" />
            <img class="header"
                 :src="info.photo" />
            <div class="basic">
                <p class="name"
                   v-html="info.name"></p>
                <p class="vote">{{info.vote}}票</p>
                <p class="div"
                   v-html="info.div"></p>
                <div class="slogan">
                    <p v-html="info.slogan"></p>
                </div>
                <div class="btn"
                     @click="toggleChoose">{{choosed ? "取消选择" :"投Ta一票"}}</div>
            </div>
            <div class="video-wrapper">
                <div class="mod-title">
                    <img class="icon"
                         src="http://evp.51job.com/2019/apc/miniapp/interview.png" />
                    Ta的快问快答
                </div>
                <img class="video-cover"
                     v-if="!videoPlaying"
                     :src="info.cover" />
                <img class="play-btn"
                     @click="bindPlay"
                     v-if="!videoPlaying"
                     src="http://evp.51job.com/2019/apc/miniapp/play.png" />
                <video id="interview"
                       class="video"
                       @ended="videoEnd"
                       ref="mvideo"
                       controls="false"
                       show-center-play-btn="false"
                       :src="info.video"></video>
            </div>
            <div class="mod-wrapper">
                <div class="mod-title">
                    <img class="icon"
                         src="http://evp.51job.com/2019/apc/miniapp/story.png" />
                    关于Ta的故事
                </div>
                <div class="part"
                     v-for="(item, index) in info.story"
                     :key="index">
                    <p class="title"
                       v-html="item.title"></p>
                    <p class="content"
                       v-html="item.content"></p>
                </div>
            </div>
            <div class="mod-wrapper">
                <div class="mod-title">
                    <img class="icon"
                         src="http://evp.51job.com/2019/apc/miniapp/tuijian.png" />
                    同事们眼中的Ta
                </div>
                <p class="content"
                   v-html="info.tuijian"></p>
            </div>
            <div class="logo-wrapper">
                <img src="http://evp.51job.com/2019/apc/miniapp/logo.png" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "detail",
    data() {
        return {
            info: {},
            videoPlaying: false,
            choosed: false
        };
    },
    methods: {
        bindPlay() {
            this.videoPlaying = true;
            var mvideo = this.$refs.mvideo;
            mvideo.play();
        },
        videoEnd() {
            this.videoPlaying = false;
        },
        toggleChoose() {
            if (!this.choosed && this.globalData.self.votes.length >= 3) {
                alert("每位用户只能选择3位候选人");
                return;
            }
            this.choosed = !this.choosed;
            if (this.choosed) {
                // 选择
                if (this.globalData.self.votes.indexOf(this.info.uid) < 0) {
                    this.globalData.self.votes.push(this.info.uid);
                }
            } else {
                // 取消选择
                if (this.globalData.self.votes.indexOf(this.info.uid) >= 0) {
                    this.globalData.self.votes.splice(
                        this.globalData.self.votes.indexOf(this.info.uid),
                        1
                    );
                }
            }
            console.log(this.globalData.self.votes);
        }
    },
    created() {
        let id = this.$route.params.id;
        console.log(id);
        console.log(this.globalData.list[id]);

        // 初始化
        let info = this.globalData.list.filter(item => {
            return item.id == id;
        })[0];

        if (!info) {
            this.$router.replace("/");
        }

        if (this.globalData.self.votes.indexOf(info.uid) >= 0) {
            this.choosed = true;
        }

        if (!info.formated) {
            // 格式化数据
            info.slogan = info.slogan.replace(/\\n/g, "<br>");
            info.story = JSON.parse(info.story);
            let story = [];
            info.story.map(item => {
                console.log(item.content);
                story.push({
                    title: item.title.replace(/\n/g, "<br>"),
                    content: item.content.replace(/\n/g, "<br>")
                });
            });
            info.story = story;
            info.tuijian = info.tuijian.replace(/\\n/g, "<br>");
            info.formated = true;

            console.log(info);
        }

        this.info = info;
    }
};
</script>

<style lang="scss" scoped>
.detail {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;

    .container {
        width: 7.5rem;
        font-size: 0;
        font-family: PingFangSC, Source Han Sans;
    }
    .bg {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: -1;
    }
    .header {
        width: 100%;
    }
    .basic {
        padding: 0.4rem;
        min-height: 4rem;
        box-sizing: border-box;
        background: #092651;
        color: #fff;
    }
    .basic .name {
        font-size: 0.48rem;
        font-weight: 600;
        line-height: 0.64rem;
        display: inline-block;
    }
    .basic .vote {
        font-size: 0.48rem;
        font-weight: 600;
        line-height: 0.64rem;
        float: right;
    }
    .basic .div {
        margin-top: 0.2rem;
        font-size: 0.32rem;
        color: rgba(255, 255, 255, 0.5);
    }
    .basic .slogan {
        margin-top: 0.24rem;
        font-size: 0.44rem;
        line-height: 1.2;
    }
    .slogan p {
        display: block;
    }
    .basic .btn {
        margin: 0.4rem auto 0;
        width: 2.9rem;
        height: 0.6rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.4rem;
        color: #092651;
        font-size: 0.28rem;
        line-height: 0.6rem;
        text-align: center;
    }

    .video-wrapper {
        margin: 0.86rem auto 0;
        width: 6.52rem;
        height: 4.6rem;
        border: 0.01rem solid #b3b8c9;
        position: relative;
    }
    .mod-title {
        position: absolute;
        top: -0.44rem;
        left: 0.2rem;
        background: #fff;
        color: #092651;
        font-size: 0.34rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        padding-right: 0.24rem;
    }
    .mod-title .icon {
        width: 0.82rem;
        margin-right: 0.08rem;
    }
    .video {
        position: absolute;
        top: 0.74rem;
        left: 0;
        right: 0;
        margin: auto;
        width: 6.13rem;
        height: 3.44rem;
    }
    .video-cover {
        position: absolute;
        top: 0.74rem;
        left: 0;
        right: 0;
        margin: auto;
        width: 6.13rem;
        height: 3.44rem;
        z-index: 2;
    }
    .play-btn {
        position: absolute;
        top: 2.1rem;
        left: 0;
        right: 0;
        margin: auto;
        width: 0.96rem;
        z-index: 3;
    }
    .mod-wrapper {
        margin: 0.86rem auto 0;
        width: 6.52rem;
        border: 0.01rem solid #b3b8c9;
        position: relative;
        color: #092651;
        font-size: 0.26rem;
        box-sizing: border-box;
        padding: 0.74rem 0.2rem 0.4rem;
    }
    .mod-wrapper .title {
        display: block;
        margin: 0 auto;
        width: 5.9rem;
        font-size: 0.28rem;
        font-weight: 600;
        line-height: 0.42rem;
    }
    .mod-wrapper .content {
        display: block;
        font-weight: 300;
        line-height: 0.52rem;
        margin-top: 0.24rem;
    }
    .mod-wrapper .part {
        margin-bottom: 0.52rem;
    }
    .mod-wrapper .part:last-child {
        margin-bottom: 0;
    }

    .logo-wrapper {
        height: 2.22rem;
        text-align: center;
        line-height: 2.22rem;
    }
    .logo-wrapper img {
        width: 2.42rem;
    }
}
</style>
